//城市服务商/客户经理---conent主页内容（大致一样）===>这是管理页面
import React,{Component} from 'react'
import { Row,Col,Form, Input,DatePicker ,Select,Table,Modal ,message} from 'antd';
import Button from '../../components/button/button'
import PayRecord from '../../components/PayRecord/PayRecord'  //付费记录
import Settlement from '../../components/Settlement/Settlement'  //结算方式
import SettlementDetails from '../../components/SettlementDetails/SettlementDetails'
import Card from '../../components/card/card'
import Searchform from '../../components/SearchPanel/SearchPanel'
import * as tools from '../../tools/tools';
import $ from 'jquery'
import image from '../../Picture/daili_normal.png'
import './Manage.css'
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;

class Manage extends Component{
  constructor(props) {
    super(props);
    this.num = null;
    this.columnstype1 = [   //表格列的配置项 ==>退出 24
      { title: 'id', dataIndex: 'id', key: 'idtype1',fixed: 'left' ,className:'iddisplay',
      sorter: (a, b) => a.number - b.number },
      { title: '代理编号', dataIndex: 'agency_account.identifier', key: 'agency_account.identifiertype1'},
      { title: '代理名称', dataIndex: 'agency_account.name', key: 'agency_account.nametype1',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.showModal}>{text}</span> },
      { title: '代理账号', dataIndex: 'agency_account.mobile', key: 'agency_account.mobiletype1' },
      { title: '代理类型', dataIndex: 'agency_account.type', key: 'agency_account.typetype1',
      render:(text)=><span>{text == 1?'企业代理':'个人代理'}</span> },
      { title: '退出原因', dataIndex: 'reason', key: 'reasontype1' },                
      { title: '申请时间', dataIndex: 'created_at', key: 'created_attype1' ,
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span>},     //type状态
      { title: '操作结果', dataIndex: 'type', key: 'typetype1' ,
      render:(text)=><span>{text ==1?'待处理':(text == 2?'已同意':'已拒绝')}</span>},
      { title: '操作人', dataIndex: 'operator', key: 'operatortype1' },
      { title: '操作备注', dataIndex: 'remark', key: 'remarktype1', 
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} >{text}</span>},
      { title: '操作时间', dataIndex: 'operation_time', key: 'operation_timetype1',
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span> }
    ];

    this.columnstype2 = [   //表格列的配置项  ==》结算管理21
      { title: 'id', dataIndex: 'id', key: 'idtype2',fixed: 'left' ,className:'iddisplay',
      sorter: (a, b) => a.number - b.number },
      { title: '代理编号', dataIndex: 'identifier', key: 'identifiertype2'},
      { title: '代理名称', dataIndex: 'name', key: 'nametype2',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.showModal}>{text}</span> },
      { title: '代理账号', dataIndex: 'mobile', key: 'mobiletype2' },
      { title: '代理类型', dataIndex: 'type', key: 'typetype2' ,
      render:(text)=><span>{text ==1?"企业代理":"个人代理"}</span>},
      { title: '结算状态', dataIndex: 'settlement_status', key: 'settlement_statustype2' ,
      render:(text)=><span>{text == 1?'待结算':(text == 2?"可结算":(text ==3?"结算中":"已完成"))}</span>},
      { title: '付费类型', dataIndex: 'payment_type', key: 'payment_typetype2' ,
      render:(text)=><span>{text == 1?'正常付款':"定金"}</span>},
      { title: '是否停用', dataIndex: 'status', key: 'statustype2' ,
      render:(text)=><span>{text == 1?'启用':"停用"}</span>},
      { title: '结算时间', dataIndex: 'settlement_time', key: 'settlement_timetype2' ,
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span>},
      { title: '付费记录', dataIndex: 'payment_text', key: 'payment_texttype2',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.seedetails}>查看</span>}
    ];
    this.columnstype3 =  [   //表格列的配置项  ==》结算记录22
      { title: 'id', dataIndex: 'id', key: 'idtype3' ,fixed: 'left',className:'iddisplay',
      sorter: (a, b) => a.number - b.number },
      { title: '代理编号', dataIndex: 'agency_account.identifier', key: 'identifiertype3'},
      { title: '代理名称', dataIndex: 'agency_account.name', key: 'nametype3',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.showModal}>{text}</span> },
      { title: '代理账号', dataIndex: 'agency_account.mobile', key: 'mobiletype3' },
      { title: '代理类型', dataIndex: 'agency_account.type', key: 'typetype3' ,
      render:(text)=><span>{text ==1?"企业代理":"个人代理"}</span>},
      { title: '付费方式', dataIndex: 'payment_mode', key: 'payment_modetype3' ,
      render:(text)=><span>{text == 1?'待结算':(text == 2?"可结算":"已完成")}</span>},
      { title: '付费金额', dataIndex: 'payment_part', key: 'payment_parttype3' },
      { title: '付费类型', dataIndex: 'payment_type', key: 'payment_typetype3' ,
      render:(text)=><span>{text == 1?'启用':"停用"}</span>},
      { title: '结算详情', dataIndex: 'settlementdetial', key: 'settlementdetialtype3',
      render:()=><span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.seedetails}>查看</span> },
      { title: '结算人', dataIndex: 'settlement_man', key: 'settlement_mantype3'},
      { title: '结算时间', dataIndex: 'settlement_time', key: 'settlement_timetype3',
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span> },
      { title: '审核人', dataIndex: 'examine_man', key: 'examine_mantype3' },
      { title: '审核备注', dataIndex: 'examine_remark', key: 'examine_remarktype3' },
      { title: '审核时间', dataIndex: 'examine_time', key: 'examine_timetype3' ,
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span>},
    ];
    this.columnstype4 =  [   //表格列的配置项  ==》收益分配23
      { title: 'id', dataIndex: 'agency_payment_id', key: 'idtype4',fixed: 'left' ,className:'iddisplay',
      sorter: (a, b) => a.number - b.number },
      { title: '代理编号', dataIndex: 'agency_account.identifier', key: 'identifiertype4'},
      { title: '代理名称', dataIndex: 'agency_account.name', key: 'nametype4',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.showModal}>{text}</span> },
      { title: '代理账号', dataIndex: 'agency_account.mobile', key: 'mobiletype4' },
      { title: '代理类型', dataIndex: 'agency_account.type', key: 'typetype4' ,
      render:(text)=><span>{text ==1?"企业代理":"个人代理"}</span>},
      { title: '角色', dataIndex: 'role', key: 'roletype4' ,
      render:(text)=><span>{text == 1?'待结算':(text == 2?"可结算":"已完成")}</span>},
      { title: '金额', dataIndex: 'money', key: 'moneytype4' },
      { title: '结算详情', dataIndex: 'settlementdetial', key: 'settlementdetialtype4',
      render:()=><span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.seedetails}>查看</span> },
      { title: '结算时间', dataIndex: 'created_at', key: 'created_attype4',
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span> },
      { title: '打款状态', dataIndex: 'pay_money_status', key: 'pay_money_statustype4' ,
      render:(text)=><span>{text ==1?'未打款':'已打款'}</span>},
    ];

    this.columns = this.props.location.state.id ==24 ?this.columnstype1:(this.props.location.state.id ==21?this.columnstype2:(this.props.location.state.id ==22?this.columnstype3:this.columnstype4))

    this.state = {
      visible:false,
      payvisible: false,
      remarkvisible:false,
      settlementvisible:false,
      playmoney:false,
      agentquit:null,
      remarktext:'',
      proxynumber:null,
      disabled:'disabled',
      newbutton:{
        background: '#D8D8D8',
        borderRadius: '100px',
        width:'88px',
        height:'30px',
        color:'#999999',
        marginLeft:'30px',
      },
      titleflag:1,
      citydata:'',
      modaltitle:[
        {
            id:1,
            name:'账户信息'
        },
        {
            id:2,
            name:'银行信息'
        },
        {
            id:3,
            name:'签约信息'
        },
        {
            id:4,
            name:'操作日志'
        }
      ],
      searchKeys:
        [
        {
          id : 'identifie',
          name : '代理编号',
          type : 1,
        },
        {
          id : 'mobile',
          name : '代理账号',
          type : 1,
          
        },
        {
          id : 'name',
          name : '代理名称',
          type : 1,
          
        },
        {
          id : 'type',
          name : '代理类型',
          type : 2,
          options : [
            {
                val : 2,
                text : '个人代理'
            },{
                val : 1,
                text : '企业代理'
            }
          ]
        },
        {
          id:'status',
          name:'状态',
          type:2,
          options : [
            {
                val : 1,
                text : '启用'
            },{
                val : -1,
                text : '禁用'
            }
          ]
        },
        {
          id : 'Signatory',
          name : '签约人',
          type : 1,
          
        },
        {
          id : 'time',
          name : "结算时间",
          type : 3,
        }
      ]
    
    };
  }
  componentWillMount(){           //获取table列表内容
    tools.loginView(this).then(
    $.ajax({
      url:tools.apiUrl+this.props.location.state.url,
      type :'Post',
      data:{
        'token': localStorage.token,
      },
      success:(res)=>{
        if(res.status == 1){
          this.setState({
            columnsdata:res.result
          })
        // }else{
        //   message.error(res.msg)
        }
      }
    })
  )
  }

  handleSubmit = (data) => {        // from点击确认提交产生的数据---搜索
    data.token = localStorage.token;
    if(data.time && data.time.length > 0) {
      if(this.props.location.state.id ==21){
        data.start_time = new Date(data.time[0]._d.getTime()).toLocaleDateString();        //这里看上传时间结算时间还是审核时间，以及接口的属性名
        data.end_time = new Date(data.time[1]._d.getTime()).toLocaleDateString();
        data.time = '';
      }else if(this.props.location.state.id ==24){
        data.created_start_time = new Date(data.time[0]._d.getTime()).toLocaleDateString(); 
        data.created_end_time = new Date(data.time[1]._d.getTime()).toLocaleDateString();
        data.time = '';
      }else{
        data.settlement_start_time = new Date(data.time[0]._d.getTime()).toLocaleDateString(); 
        data.settlement_end_time = new Date(data.time[1]._d.getTime()).toLocaleDateString();
        data.time = '';
      }
    }
    tools.loginView(this).then(
    $.ajax({
      url:tools.apiUrl+this.props.location.state.url,
      type :'Post',
      data:data,
      success:(res)=>{
        if(res.status == 1){
          this.setState({
            columnsdata:res.result
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  showModal=(e)=>{            //代理信息详情

    this.num = e.target.parentNode.parentNode.firstChild.nextSibling.innerText
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url:tools.apiUrl+'agency/agency_info',
      data:{
        token: localStorage.token,
        id: this.num
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            modalcontent:res.result,
            visible: true
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  handleCancel = () => {              //modal取消并且回传
    this.setState({visible: false});
  }
  titleclick=(obj)=>{    //点击modal样式改变
    this.setState({
        titleflag:obj
    })
  }

  seedetails=(e)=>{                  //代理付费记录
    let urldata = (this.props.location.state.id == 21) ? tools.apiUrl+'agency/payment_record':tools.apiUrl+'agency/settlement_info';  
    let number = e.target.parentNode.parentNode.firstChild.nextSibling.innerText
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url: urldata,
      data:{
        id: number,
        token: localStorage.token,
      },
      success:(res)=>{
        console.log(res)
        if(res.status ==1){
          if(this.props.location.state.id ==21){
            this.setState({
              recorddata:res.result,
              payvisible: true
            })
          }else{
            console.log(5566)
            this.setState({
              detaildata:res.result,
              detailsvisible: true
            })
          }
          
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  tablechange=(pagination, filters, sorter)=>{            //table改变页数时的回调
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url:tools.apiUrl+this.props.location.state.url+'?page='+pagination.current,
      data:{
        'token': localStorage.token,
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            columnsdata:res.result
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }       

  //下面是测试数据   //列表和选择回调
  rowSelection = {   
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(selectedRows)
      if(selectedRowKeys.length == 1){
        this.setState({
          newbutton:{
            border:'1px solid #4A90E2',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#4A90E2',
            marginLeft:'30px'
          },
          disabled:false,
          selectedata:selectedRows
        })
      }else{
        this.setState({
          newbutton:{
            background: '#D8D8D8',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#999999',
            marginLeft:'30px',
          },
          disabled:'disabled'
        })
      }
    },
    type: 'radio',//单选,
  };  

  remarkvisible=(obj)=>{         //点击打开备注modal
    this.setState({
      remarkvisible:true,
      agentquit:obj
    })
  }
  remarkhandleCancel=()=>{  //备注modal取消事件
    this.setState({
      remarkvisible:false
    })
  }
  remarkchange=(e)=>{
    this.setState({
      remarktext:e.target.value
    })
  }
  onOk=()=>{              //备注点击提交同意或拒绝   
    if(this.state.agentquit == -1){
      tools.loginView(this).then(
      $.ajax({
        type:'Post',
        url:tools.apiUrl+'agency/agency_chage_state',  //停用
        data:{
          token: localStorage.token,
          id:this.state.selectedata[0].id,
          status:this.state.agentquit,
          // remark:this.state.remarktext
        },
        success:(res)=>{
          if(res.status ==1){
            $.ajax({
              url:tools.apiUrl+this.props.location.state.url,
              type :'Post',
              data:{
                'token': localStorage.token,
              },
              success:(respon)=>{
                if(respon.status ==1){
                  this.setState({
                    columnsdata:respon.result
                  })
                }else{
                  message.error(respon.msg)
                }
              }
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
    }else{
      tools.loginView(this).then(
      $.ajax({
        type:'Post',
        url: tools.apiUrl+'agency/agency_out_handle',
        data:{
          token: localStorage.token,
          id:this.state.selectedata[0].id,
          type:this.state.agentquit,
          remark:this.state.remarktext
        },
        success:(res)=>{
          if(res.status ==1){
            $.ajax({
              url:tools.apiUrl+this.props.location.state.url,
              type :'Post',
              data:{
                'token': localStorage.token,
              },
              success:(respon)=>{
                if(respon.status ==1){
                  this.setState({
                    columnsdata:respon.result
                  })
                }else{
                  message.error(respon.msg)
                }
              }
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
    }
      this.setState({
        remarktext:'',
        remarkvisible:false
      })
      console.log(this.state.columnsdata)
  }
  
  Settlementshow=()=>{        //结算modal打开
    this.setState({
      settlementvisible:true
    })
  }
 

  playmoney=()=>{        //打款提示modal
    this.setState({
      playmoney:true
    })
  }
  playmoneyhandleCancel=()=>{        //打款提示取消
    this.setState({
      playmoney:false
    })
  }
  promptplaymoney=()=>{               //打款提示modal里确认回调
    tools.loginView(this).then(
    $.ajax({
      type:'POST',
      url:tools.apiUrl+'agency/pay_payment_allot',
      data:{
        token: localStorage.token,
        id:this.state.selectedata[0].id
      },
      success:(res)=>{
        if(res.status ==1){
          $.ajax({
            type:'POST',
            url:tools.apiUrl+this.props.location.state.url,
            data:{
              token: localStorage.token,
            },
            success:(respon)=>{
              if(respon.status ==1){
                this.setState({
                  columnsdata:respon.result
                })
              }else{
                message.error(respon.msg)
              }
            }
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }
  
  paycancel=()=>{
    this.setState({
      payvisible:false
    })
  }
  settlementcancel=()=>{
    this.setState({
      settlementvisible:false
    })
  }
  detailscancel=()=>{
    this.setState({
      detailsvisible:false
    })
  }

  render(){
    const totlebutton={
      border: '1px solid #50E3C2',
      borderRadius:'34px',
      width:'88px',
      height:'30px',
      color:'#50E3C2',
      position:'absolute',
      right:'100px'
    }
    const searchbtn={
      background: '#4A90E2',
      borderRadius: '100px',
      width:'88px',
      height:'30px',
      color:'#fff',
      lineHeight:'30px'
    }

    const { getFieldDecorator } = this.props.form;
    const columns = [{   //测试数据
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: text => <a href="">{text}</a>,
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      }, {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
            <a href="">Delete</a>
        ),
    }];
    const data = [{
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        }, {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        }, {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    }];
    const tableclass={
      outline:"1px solid red"
    }
   return(
      <div className="city">
        <div className="city_search">

          <Searchform 
            onSearchCb={this.handleSubmit}
            searchKeys={this.state.searchKeys} / >
        </div>
        <div className="city_biaotou"> 
          {this.props.location.state.id == 24?<div>
            <Button key="btn2" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.remarkvisible(3)}>拒绝</Button>    
            <Button key="btn3" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.remarkvisible(2)}>同意</Button>    
          </div>:(this.props.location.state.id == 21 ?(<div>
            <Button key="btn2" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={this.Settlementshow}>结算</Button>    
            <Button key="btn3" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.remarkvisible(-1)}>停用</Button>    
          </div>):(this.props.location.state.id ==22 ?false: <Button key="btn3" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={this.playmoney}>打款</Button>    ))}
          
          <div className="city_daochu">
            <img src={image} alt="" style={{backgroundColor:"blue"}}/>
          </div>
          <Button key="btn4" datastyle={totlebutton}>表头设置</Button>                     {/*   这里几个button是控制下面table的*/}
        </div>
        <div>
            <Table columns={this.columns} dataSource={this.state.columnsdata? this.state.columnsdata.data:false} scroll={{ x: 1700 }} 
              rowSelection={this.rowSelection} onChange={this.tablechange} rowClassName={(record,index)=>{index ==1?'manage_tableclass':false}}
              pagination={{ pageSize: 10 ,showQuickJumper:true,total:this.state.columnsdata  ? (this.state.columnsdata.last_page*10 ):false}}>
            </Table>
            <div className="city_datanumber">
              <span >已为您匹配相关结果，共 {this.state.columnsdata ?this.state.columnsdata.total:false} 条记录</span>
            </div>
     
        </div>
        <div> 
               {/* 这里是页面内打开的模态框 */}

          <Modal title={this.state.modalcontent?(this.state.modalcontent.type ==1?'城市服务商':'客户经理'):false} className="modal_box"
                visible={this.state.visible}
                maskClosable={false}
                footer={null}
                onCancel={this.handleCancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}
                >
                <div className="modal_btnbox">
                    <ul>
                        {this.state.modaltitle.map((item,index)=>{
                              return(
                                  <li key={item.id} className={this.state.titleflag === index+1?"titleclick":""} 
                                      onClick={()=>this.titleclick(item.id)}>      
                                          {item.name}
                                  </li>
                              )
                          })}
                    </ul>
                </div>
                <div style={{marginTop:"30px"}}>
                    <Card head="账" item="1" modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>                 {/* 调用的组件  */}
                    <Card head="银" item="2" modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>
                    <Card head="签" item="3" oldpayson={true} modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>

                    {/* <div className="card_box">
                        <div className="card_box_head">
                            日
                        </div>
                        <div className="card_box_content">
                            <div className="card_content_triangle"></div>
                            <div>
                                <Table columns={columns} dataSource={data} pagination={false}>
                                </Table>
                            </div>
                        </div>
                    </div> */}
                </div>
            </Modal>

          <PayRecord show={this.state.payvisible} onCancel={this.paycancel} modaldata={this.state.recorddata?this.state.recorddata:false}></PayRecord> {/* 付费记录 */}
          <Modal 
            title="备注"
            onCancel={this.remarkhandleCancel}
            maskClosable={false}
            onOk={this.onOk}
            visible={this.state.remarkvisible}
            >
            <textarea cols='75' rows="5" placeholder="请输入备注，最多250字"  maxLength="250" style={{resize:'none'}} onChange={this.remarkchange} value={this.state.remarktext}></textarea>
          </Modal>
          <Settlement show={this.state.settlementvisible} onCancel={this.settlementcancel} settlecontent={this.state.selectedata}></Settlement>
          <SettlementDetails show={this.state.detailsvisible} onCancel={this.detailscancel} modaldata={this.state.detaildata?this.state.detaildata:false} type="2"></SettlementDetails>
          <Modal
            title="提示"
            maskClosable={false}
            onCancel={this.playmoneyhandleCancel}
            onOk={this.promptplaymoney}
            visible={this.state.playmoney}>
              确认打款后，状态无法改变，是否确认？
          </Modal>
        </div>
      </div>
    )
  }
  
}
const WrappedManage  = Form.create()(Manage);


export default WrappedManage



